<template>
  <div class="artist-nav">
    <ul>
      <li
        v-for="item in list"
        :key="item"
        :class="[liIndex === item ? 'active' : '']"
      >
        <a
          href="javascript:;"
          @click="liClick(item)"
          :class="[liIndex === item ? 'active' : '']"
          >{{ item }}</a
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        '热门',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        '其它'
      ],
      liIndex: this.$route.query.initial ?? '热门'
    }
  },
  methods: {
    liClick(initial) {
      console.log(initial)
      this.$router
        .push({
          path: '/discover/artist',
          query: {
            initial
          }
        })
        .catch((err) => err)
    }
  },
  watch: {
    $route(to) {
      this.liIndex = to.query.initial
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: #fff;
  background: #c20c0c;
}
a {
  color: #000;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
.artist-nav {
  margin-top: 20px;
}
ul {
  font-size: 14px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  li {
    padding: 2px 10px;
  }
}
</style>
